<!DOCTYPE html>
<html>

<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>HTML5 Feature Tips</title>
    <link rel="apple-touch-icon" sizes="57x57" href="./favicons/apple-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="60x60" href="./favicons/apple-icon-60x60.png">
    <link rel="apple-touch-icon" sizes="72x72" href="./favicons/apple-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="./favicons/apple-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="./favicons/apple-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="./favicons/apple-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="./favicons/apple-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="./favicons/apple-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="./favicons/apple-icon-180x180.png">
    <link rel="icon" type="image/png" sizes="192x192" href="./favicons/android-icon-192x192.png">
    <link rel="icon" type="image/png" sizes="32x32" href="./favicons/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="96x96" href="./favicons/favicon-96x96.png">
    <link rel="icon" type="image/png" sizes="16x16" href="./favicons/favicon-16x16.png">
    <link rel="manifest" href="./favicons/manifest.json">
    <meta name="msapplication-TileColor" content="#ffffff">
    <meta name="msapplication-TileImage" content="./favicons/ms-icon-144x144.png">
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <link href="https://fonts.googleapis.com/css2?family=Chilanka&display=swap" rel="stylesheet">
    <link rel='stylesheet' type='text/css' media='screen' href='main.css'>
</head>

<body>
    <a 
      href="https://github.com/atapas/html-tips-tricks"
      target = "_blank"
      rel="tag noopener noreferrer">
      <img 
        width="149" 
        height="149" 
        src="https://github.blog/wp-content/uploads/2008/12/forkme_left_green_007200.png?resize=149%2C149" 
        class="attachment-full size-full" 
        alt="Fork me on GitHub" 
        data-recalc-dims="1">
    </a>
    <div class="demo">
        <h1>HTML5 Feature Tips</h1>
        <img src="html5.png" alt="HTML5" style="height: 100px;width: 100px;">
        <ul class="list">
            <li>
                <a href='./details/index.html'>
                    Details Tag</a> - Specify details that the user can open and close on demand
            </li>
            <li>
                <a href='./inputs/index.html'>
                    Inputs</a> - Various useful tips
            </li>
            <li>
                <a href='./content-editable/index.html'>
                    Content Editable</a> - Make the content Editable
            </li>
            <li>
                <a href='./mark/index.html'>
                    Mark Content</a> - Highlight things
            </li>
            <li>
                <a href='./data-attribute/index.html'>
                    Custom Data</a> - Data with elements
            </li>
            <li>
                <a href='./output/index.html'>
                    Output Tag</a> - To perform a calculation and show the result
            </li>
            <li>
                <a href='./datalist/index.html'>
                    Datalist Tag</a> - Allows you to search and add elements
            </li>
            <li>
                <a href='./range/index.html'>
                    Range(Slider)</a> - Do you need a range slider?
            </li>
            <li>
                <a href='./map/index.html'>
                    Map</a> - Image map with coordinates
            </li>
            <li>
                <a href='./meter/index.html'>
                    Meter and Progress</a> - Display a gauge
            </li>
            <li>
                <a href='./dialog/index.html'>
                    Dialog</a> - Display a Modal Dialog
            </li>
        </ul>
    </div>
</body>

</html>